<template>
  <div id="sgae">
    <ul>
      <span>
    <input type="checkbox" 
       :checked="isTrue"
       @change="isAllSelector"/>全选
   </span>
      <template v-for="(item,index) in list">
        <li :key="item.id">
        <img :src="item.s_good.s_goods_photos[0].path" alt="">
        <span>商品名称：{{item.s_good.name}}</span>
        <span>单价：{{item.s_good.price}}</span>
        <span class="sp" >数量：<div class="db"><i @click="btn(index)"><a-icon type="minus" /></i> <div class="oo">{{item.num}}</div> <i @click="pp(index)"><a-icon type="plus" /></i> </div> </span>
        <span>小计：{{item.s_good.price * item.num}} </span>
        <span>实付款：{{item.s_good.price * item.num}}</span>
        <input type="checkbox"  :checked="isTrue" @change="isSelector(item)" >
        <div class="co">
        <button @click="bty">确定购买</button>
        <button @click="btt(item.id)">删除</button>
        </div>
      </li>

      </template>
      
    </ul>
   <div class="last">
      <p class="num">共{{this.num}}件</p>
    <p class="sum">结算:{{this.sum}}元</p>
   </div>
      <div class="site">
         <template>
          <p>收货人：{{lic.name}}</p>
          <p>联系电话：{{lic.phone}}</p>
          <p>收获地址：{{lic.area}}</p>
          <p>详细地址：{{lic.area_name}}</p>
         </template>
      </div>
       <button @click="nu">我的收货地址</button>
       <button @click="xin">新增收货地址</button>
       <!-- <button>提交订单</button> -->
    <!-- <aside class="bag">
      <div class="empty">
        <div class="yob">
          <h1>您的购物车还是空的!</h1>
          <h2>登录后将显示您之前加入的商品</h2>
          <button><h3 class="col"><div href="">立即登录</div></h3></button>
          <button><h3><div href="">马上去购物</div></h3></button></div>
      </div> -->
      <!-- <div class="recommend">
         <h1>为您推荐</h1>
         <ul>
         <template v-for="item in list">
             <li :key="item.id" @click="btn(item.id)">
             <div><img :src="item.s_goods_photos[0].path" alt=""></div>
             <span class="model">{{item.name}}</span>
             <span class="price">{{item.price + "元"}}</span>
             <span class="comment">99.9万人好评</span>
             <span class="htbk animate__animated animate__fadeInUp">加入购物车</span>
           </li>
         </template> 
         </ul>
      </div> -->
    <!-- </aside> -->
  </div>
</template>

<script>
import { message } from 'ant-design-vue';
export default {
  
  data:()=>{
    return {
      list:[],
      isTrue:false,
        lib:[],
            lic:[],
     arr:[],
     sum:0,
     num:0
    }
  },
  mounted(){
    this._axios.get(`/api/shoppingCart?project_id=38`).then((res)=>{
      this.list=res.data.result
      console.log(this.list);
    }),
       this._axios.get("/api/address").then((res)=>{
        this.lib=res.data.result
        // console.log(this.lib);
    })
    this._axios.post(`/api/setDefault/${this.$route.query.id}`).then((res)=>{
       this.lic=res.data.result
       console.log(this.lic);
    })
  },
  methods:{
       xin(){
        this.$router.push({path:'/order'})
    },
    nu(){
        this.$router.push({path:'/all'})
    },
    bty(){
      this.$router.push({path:'/site'})
    },
    btn(index){
      if(this.list[index].num==1){
         message.error("不能少于1")
      }else{
        this.list[index].num--
      }
    },
    isSelector(item){
      // console.log(item.flag);
     item.flag=this.isTrue
        if(item.flag) {
          item.flag = false;
          this.sum-=(item.s_good.price * item.num);
           this.num-=item.num
        } else {
          item.flag = true;
          this.sum+=(item.s_good.price * item.num);
          this.num+=item.num
        }
        
    },
    isAllSelector(){  
      this.isTrue=!this.isTrue
   if(this.isTrue){
     this.list.forEach((item)=>{
       this.sum+=(item.s_good.price * item.num);
        this.num+=item.num
     })
     console.log(this.sum);
   }else{
     this.sum=0
     this.num=0
     this.isTrue=false
   }
    },
    pp(index){
      this.list[index].num++
    },
    btt(id){
      this._axios.delete(`/api/shoppingCart/${id}`).then((re)=>{
        if(re){
          message.success('删除成功') 
           this._axios.get(`/api/shoppingCart?project_id=38`).then((res)=>{
      this.list=res.data.result
    })
        } 
      })
      
    },
   
  },
   computed: {
    
   },
   watch:{
    list:{
      handler:function(){
      localStorage.setItem('list',JSON.stringify(this.list));
      // console.log(this.list);
     this.isTrue =  this.list.every((item)=>{
       console.log(item.flag);
        // return item.flag;
       
      })
       console.log( this.isTrue);
      // console.log( this.isAllSelector);
    },
    //深度侦听 侦听数组的长度和里面每一个属性的变化
    deep:true,
    },

},
}
</script>




<style lang="scss" scoped>
#sgae{
  width: 1226px;
  margin: 0 auto;
    button{
        width: 130px;
        height: 40px;
        border: none;
        background-color: skyblue;
        color: #fff;
        border-radius: 20px;
        margin-right: 20px;
      }
  ul{
   
    li{
      position: relative;
      user-select: none;
      border: 1px solid #c1c1c1 ;
      border-top: none;
      padding-bottom: 5px;
      span{
        display: inline-block;
       width: 210px;
       .db{
         border: 1px solid #c1c1c1;
         border-radius: 10px;
         width: 100px;
         display: inline-block;
        text-align: center ;
        i{
          width: 20px;
          cursor: pointer;
        }
        .oo{
          display: inline-block;
          margin: 0 10px;
        }
       }
      }
     
      img{
        width: 100px;
      }
      .co{
        text-align: right ;
       button{
        width: 80px;
        height: 40px;
        border: none;
        background-color: skyblue;
        color: #fff;
        border-radius: 20px;
        margin-right: 20px;
      }
      }
      
    }
  }
  .last{
    // position: absolute;
    // right: 20px;
    float: right;
    width: 100px;
    // background-color: red;
    .num,.sum{
      width: 100px;
      height: 50px;
      // background-color:pink;
      text-align:center;
      line-height: 50px;
      border: none;
      font-size:20px;
      background-color: skyblue;
      color:#fff;
      border-radius: 20px;
    }
  }




//   li{
//     list-style: none;
//   }
//   .bag{
//     background-color: #f5f5f5;
//     div{
//       display: inline-block;
//     }
//     .empty{
//       .yob{
//         height: 450px;
//         padding-left: 558px;
//         background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/staticsfile/cart/cart-empty.png);
//         background-repeat: no-repeat;
//         background-size: 450px;
//         color: #b0b0b0;
//         margin: 124px 0 77px 380px;
//         h1{
//           font-size: 36px;
//           margin-top: 70px;
//         }
//         h2{
//           font-weight: normal;
//           font-size: 20px;
//         }
//         button{
//           margin-right: 10px;
//           margin-top: 20px;
//           width: 170px;
//           height: 48px;
//           line-height: 48px;
//           border: 1px solid #ff6700;
//           h3{
//             font-weight: normal;
//           }
//         }
//         .col{
//             background-color: #ff6700;
//             color: #fff;
//             a{
//               color: #fff;
//             }
//           }
//       }
//     }
//   }
//   .recommend{
//     position: relative;
//     border-top: 1px solid #757575;
//     padding-top: 50px;
//     margin: 0 100px;
//     h1{
//       position: absolute;
//       font-weight: normal;
//       height: 40px;
//       top: -20px;
//       left: 550px;
//       background-color: #f5f5f5;
//       width: 482px;
//       text-align: center;
//     }
//     ul{
//       display: flex;
//       margin: 0 60px;
//       li{
//         position: relative;
//         width: 268px;
//         height: 370px;
//         text-align: center;
//         background-color: #fff;
//         margin: 0 0 14px 14px;
//         flex-wrap: wrap;
//             &:hover .htbk{
//             display: block;
//             bottom: -10px;
//             background-color: #ff6700;
//             color: #fff;
//             transition: all .01s; 
//           }
//         div{
//           img{
//           width: 160px;
//           height: 160px;
//           margin: 40px auto 20px;
//           }
//         }
//         span{
//           display: block;
//           margin: 0 10px 30px;
//         }
//         .price{
//             color: #ff6700;
//           }
//         .htbk{
//           display: none;
//           position: absolute;
//           padding: 0 30px;
//           margin-left: 70px;
//           height: 30px;
//           line-height: 30px;
//           font-size: 16px;
//           z-index: 999;
//           bottom: -50px;
//           border: 1px solid #ff6700;
//         }
//       }
//     }
//   }
 }
</style>